<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        table,
        tr,
        th,
        td {
            border: 1px solid #ccc;
        }

        tr {
            height: 40px;
        }

        table {
            border-collapse: collapse;
            width: 630px;
            text-align: center;
            margin: 20px auto;
        }

        thead {
            background-color: yellowgreen;
        }

        fieldset {
            width: 600px;
            margin: 0 auto;
        }

        input {
            height: 20px;
        }
    </style>
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
</head>

<body>
    <div id="app">
        <!-- 第一部分：输入信息 -->
        <fieldset>
            <legend>学生录入系统</legend>
            <p>
                <span>姓名：</span>
                <input type="text" name="username" class="username">
            </p>
            <p>
                <span>年龄：</span>
				<input type="number" name="age" min="0" max="99" class="age">
            </p>
            <p>
                <span>性别：</span>
                <select name="sex" id="sex">
                    <option value="男">男</option>
                    <option value="女">女</option>
                </select>
            </p>
            <p>
                <span>手机：</span>
                <input type="tel" name="phone" class="phone">
            </p>
            <p>
                <button id="but">确认提交</button>
            </p>

        </fieldset>
        <!-- 第二部分：信息展示 -->
        <table>
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>手机</th>
                    <th>删除</th>
                </tr>
            </thead>
            <tbody class="tbody">
            </tbody>
        </table>
    </div>
    <script>
		function randomInteger(min, max) {
		  // 现在范围是从  (min-0.5) 到 (max+0.5)
		  let rand = min - 0.5 + Math.random() * (max - min + 1);
		  return Math.round(rand);
		}
		
		
		$('#but').click( function() {
			let information = [];
			$('input').each( (i, n) => {
				information.push(n);
			})
			let index = randomInteger(0, 1000000000);
			$('.tbody').append(`
				<tr>
                    <td>${information[0].value}</td>
                    <td>${information[1].value}</td>
                    <td>${$('#sex').val()}</td>
                    <td>${information[2].value}</td>
                    <td onclick="del(${index})">删除<span hidden>${index}</span></td>	
				</tr>
			`);
		});
		
		function del(index){
			$('.tbody tr').each( (i, n) => {
				if(n.innerHTML.includes(index)){
					$(n).remove();
				}
			})
		}
		

    </script>
</body>

</html>